<%@ page contentType="text/html;charset=UTF-8" %>
<%@ page isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<c:set var="path" value="${pageContext.request.contextPath}" scope="page"/>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="referrer" content="no-referrer">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="${path}/css/bootstrap.min.css" rel="stylesheet" />
    <link href="${path}/css/sweetalert2.min.css" rel="stylesheet" />
    <script type="text/javascript"
            src="http://at.alicdn.com/t/font_885398_i0dlzjs87c.js"></script>
    <!-- My CSS -->
    <link href="${path}/css2/css-fragment-top.css" rel="stylesheet" type="text/css">
    <link href="${path}/css2/css-book.css" rel="stylesheet" type="text/css">
    <link href="${path}/css2/SmallBookList.css" rel="stylesheet" type="text/css">


</head>
<body>

<div id="login-modal" class="modal fade not-select" tabindex="-1"
     role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">登陆</h4>
            </div>
            <div class="modal-body">
                <form class="">
                    <div id="username-group" class="form-group has-feedback">
                        <label for="input-username" class="control-label">账号:</label> <input
                            id="input-username" type="text" maxlength="20" name="username"
                            class="form-control"> <span
                            class="glyphicon form-control-feedback" aria-hidden="true"></span><span
                            id="username-help" class="help-block"></span>
                    </div>
                    <div id="password-group" class="form-group has-feedback">
                        <label for="input-password" class="control-label">密码:</label> <input
                            id="input-password" maxlength="20" type="password"
                            name="password" class="form-control"> <span
                            class="glyphicon form-control-feedback" aria-hidden="true"></span><span
                            id="password-help" class="help-block"></span>
                    </div>
                    <div class="form-group">
                        <label for="input-verify" class="control-label">验证码:</label>
                        <div id="verify-group" class="input-group has-feedback"
                             style="width: 100%;">
                            <input id="input-verify" maxlength="6" type="text" name="verify"
                                   class="form-control"> <span
                                class="glyphicon form-control-feedback" aria-hidden="true"
                                style="right: 100px;"></span> <span id="img-verify"
                                                                    class="input-group-addon verify-span btn btn-default"
                                                                    style="width: 100px;"></span>
                        </div>
                        <span id="verify-help" class="help-block"></span>
                    </div>
                    <div class="form-group">
                        <div class="checkbox">
                            <label><input id="save" type="checkbox" value="">记住密码</label>
                        </div>
                    </div>
                </form>
                <hr />
                <div id="other-load-div">
                    <svg id="QQ" class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qq"></use>
                    </svg>
                    <svg id="WeiXin" class="icon" aria-hidden="true">
                        <use xlink:href="#icon-weixin"></use>
                    </svg>
                    <svg id="WeiBo" class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xinlangweibo"></use>
                    </svg>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button id="login" type="button" class="btn btn-primary">&nbsp;&nbsp;登&nbsp;&nbsp;&nbsp;&nbsp;陆&nbsp;&nbsp;</button>
            </div>
        </div>
    </div>
</div>

<div id="register-modal" class="modal fade not-select" tabindex="-1"
     role="dialog">
    <div class="modal-dialog" role="document" style="width: 500px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">注册</h4>
            </div>
            <div class="modal-body">
                <form class="bs-example bs-example-form">
                    <div id="_nickname-group" class="form-group has-feedback">
                        <label for="_input-nickname" class="control-label">昵称:</label> <input
                            id="_input-nickname" type="text" maxlength="12" name="username"
                            class="form-control"> <span
                            class="glyphicon form-control-feedback" aria-hidden="true"></span><span
                            id="_nickname-help" class="help-block">一个较长的帮助文本块</span>
                    </div>
                    <div id="_phone-group" class="form-group has-feedback">
                        <label for="_input-phone" class="control-label">手机:</label> <input
                            id="_input-phone" type="text" maxlength="11" name="phone"
                            class="form-control"> <span
                            class="glyphicon form-control-feedback" aria-hidden="true"></span><span
                            id="_phone-help" class="help-block">一个较长的帮助文本块</span>
                    </div>
                    <div id="_password-group" class="form-group has-feedback">
                        <label for="_input-password" class="control-label">密码:</label> <input
                            id="_input-password" maxlength="20" type="password"
                            name="password" class="form-control"> <span
                            class="glyphicon form-control-feedback" aria-hidden="true"></span><span
                            id="_password-help" class="help-block">一个较长的帮助文本块，超。</span>
                    </div>
                    <div id="_password-group2" class="form-group has-feedback">
                        <label for="_input-password2" class="control-label">确认密码:</label>
                        <input id="_input-password2" maxlength="20" type="password"
                               name="password" class="form-control"> <span
                            class="glyphicon form-control-feedback" aria-hidden="true"></span><span
                            id="_password-help2" class="help-block">一个较长的帮助文本块，超。</span>
                    </div>


                    <div id="_verify-group" class=form-group>
                        <label for="_input-verify" class="control-label">验证码:</label>
                        <div class="form-group">
                            <div class="input-group" style="width: 100%;">
                                <input id="_input-verify" maxlength="6" type="text"
                                       name="verify" class="form-control" style="width: 100%;">
                                <span class="glyphicon form-control-feedback"
                                      aria-hidden="true" style="right: 100px"></span> <span
                                    id="_show-verify" class="input-group-addon btn btn-default"
                                    style="width: 100px;"></span>
                            </div>
                        </div>
                        <span id="_verify-help" class="help-block">一个较长的帮dddd助文本块。</span>
                    </div>


                    <div id="_verify-phone-group" class=form-group>
                        <label for="_input-phone-number" class="control-label">短信验证码:</label>
                        <div class="form-group">
                            <div class="input-group" style="width: 100%;">
                                <input id="_input-phone-number" type="text" maxlength="6"
                                       class="form-control"> <span
                                    class="glyphicon form-control-feedback" aria-hidden="true"
                                    style="right: 100px"></span><span id="_get-phone-verify"
                                                                      class="input-group-addon btn btn-default"
                                                                      style="width: 100px;"></span>
                            </div>
                        </div>
                        <span id="_phone-number-help" class="help-block">一个较长的帮助文本块。</span>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button id="register" type="button" class="btn btn-primary">&nbsp;&nbsp;注&nbsp;&nbsp;&nbsp;&nbsp;册&nbsp;&nbsp;</button>
            </div>
        </div>
    </div>
</div>

<div id="top">
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation"
         style="overflow-x: hidden">
        <div class="container-fluid"></div>
        <div class="navbar-header">
            <a class="navbar-brand" href="${path}/page/index.do">校园图书</a>
        </div>
        <form class="navbar-form navbar-left" role="search">
            <div class="input-group">
                <input id="top_search" type="text" class="form-control input-sm"
                       placeholder="search" /> <span id="btn_search"
                                                     class="btn btn-default input-group-addon" aria-label="Left Align"><span
                    class="glyphicon glyphicon-search" aria-hidden="true"></span></span>
            </div>
        </form>
        <div>
            <ul class="nav navbar-nav navbar-right">
                <li id="btn-login" data-toggle="modal" data-target="#login-modal" class="${user == null ? 'show' : 'hide'}"><a
                        href="#">登陆</a></li>
                <li id="btn-register" data-toggle="modal" class="${user == null ? 'show' : 'hide'}"
                    data-target="#register-modal"><a href="#">免费注册</a></li>
                <li id="top-user" class="${user != null ? 'show' : 'hide'}"><a href="${path}/page/user.do">${user != null ? user.nickname : ''}</a></li>
                <li id="top-remove-user" class="${user != null ? 'show' : 'hide'}"><a href="#">退出</a></li>
                <li><a href="#">我的借书</a></li>
                <li><a href="#">我要借书</a></li>
                <li><a id="phone-book" href="#"><span class="glyphicon glyphicon-phone"></span>手机图书</a></li>
                <li><a id="wei-book" href="#"><span class="glyphicon glyphicon-phone"></span>微信公共号</a></li>
            </ul>
        </div>
    </nav>
    <div id="phone-book-image" class="top-pup-box">

    </div>
    <div id="wei-book-image" class="top-pup-box">

    </div>
</div>

<div id="search-div" class="container">
    <div class="form-inline col-md-8 col-md-offset-2">
        <div class="input-group" style="width: 100%">
            <input id="small-search" type="text" class="form-control input-lg" />
            <span class="btn btn-default input-group-addon"
                  aria-label="Left Align" style="width: 18%"> <span
                    class="glyphicon glyphicon-search" aria-hidden="true"
                    style="font-size: 20px;"></span> <label class="sr-only"
                                                            for="small-search">search</label>
				</span>
        </div>
        <div>
            <span class="label label-default">热搜</span>
            <%--@elvariable id="hots" type="java.util.List"--%>
            <c:forEach var="item" items="${hots}">
                <a class="label label-info" href="#"><c:out value="${item}"/></a>
            </c:forEach>
        </div>
    </div>
</div>

<div id="menu_wrap">
    <div class="container">
        <ul>
            <li>
                <div class="btn-group">
                    <button id="dropdown-menu1" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        经济管理
                    </button>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdown-menu1">
                        <li role="presentation">
                            <a>市场营销</a>
                        </li>
                        <li role="presentation">
                            <a>经济学理论</a>
                        </li>
                        <li role="presentation">
                            <a>国际贸易</a>
                        </li>
                        <li role="presentation">
                            <a>物流管理</a>
                        </li>
                        <li role="presentation">
                            <a>管理学原理</a>
                        </li>
                        <li role="presentation">
                            <a>财务管理</a>
                        </li>
                        <li role="presentation">
                            <a>企业史</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li>
                <div class="btn-group">
                    <button id="dropdown-menu2" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                        文学艺术
                    </button>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdown-menu2">
                        <li role="presentation">
                            <a>设计</a>
                        </li>
                        <li role="presentation">
                            <a>音乐</a>
                        </li>
                        <li role="presentation">
                            <a>青春文学</a>
                        </li>
                        <li role="presentation">
                            <a>绘画</a>
                        </li>
                        <li role="presentation">
                            <a>外国文学</a>
                        </li>
                        <li role="presentation">
                            <a>人物传记</a>
                        </li>
                        <li role="presentation">
                            <a>儿童文学</a>
                        </li>
                        <li role="presentation">
                            <a>日本文学</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li>
                <div class="btn-group">
                    <button id="dropdown-menu3" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                        人文社科
                    </button>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdown-menu3">
                        <li role="presentation">
                            <a>数学</a>
                        </li>
                        <li role="presentation">
                            <a>化学</a>
                        </li>
                        <li role="presentation">
                            <a>日语</a>
                        </li>
                        <li role="presentation">
                            <a>专业英语</a>
                        </li>
                        <li role="presentation">
                            <a>西方哲学</a>
                        </li>
                        <li role="presentation">
                            <a>自由主义</a>
                        </li>
                        <li role="presentation">
                            <a>艺术史</a>
                        </li>
                        <li role="presentation">
                            <a>人物传记</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li>
                <div class="btn-group">
                    <button id="dropdown-menu4" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                        科学技术
                    </button>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdown-menu4">
                        <li role="presentation">
                            <a>语言与编程</a>
                        </li>
                        <li role="presentation">
                            <a>电子通信</a>
                        </li>
                        <li role="presentation">
                            <a>电子电工</a>
                        </li>
                        <li role="presentation">
                            <a>数据库</a>
                        </li>
                        <li role="presentation">
                            <a>移动开发<?
                        </li>
                        <li role="presentation">
                            <a>土木工程</a>
                        </li>
                        <li role="presentation">
                            <a>神经网络</a>
                        </li>
                        <li role="presentation">
                            <a>大数据</a>
                        </li>
                        <li role="presentation">
                            <a>UE</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li>
                <div class="btn-group">
                    <button id="dropdown-menu5" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                        生活休闲
                    </button>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdown-menu5">
                        <li role="presentation">
                            <a>家庭保健</a>
                        </li>
                        <li role="presentation">
                            <a>美食烹饪</a>
                        </li>
                        <li role="presentation">
                            <a>动漫卡通</a>
                        </li>
                        <li role="presentation">
                            <a>球类</a>
                        </li>
                        <li role="presentation">
                            <a>地理学理论</a>
                        </li>
                        <li role="presentation">
                            <a>家居</a>
                        </li>
                        <li role="presentation">
                            <a>摄影</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li>
                <div class="btn-group">
                    <button id="dropdown-menu6" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                        流行小说
                    </button>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdown-menu6">
                        <li role="presentation">
                            <a>轻小说</a>
                        </li>
                        <li role="presentation">
                            <a>青春文学</a>
                        </li>
                        <li role="presentation">
                            <a>东野吾圭</a>
                        </li>
                        <li role="presentation">
                            <a>推理小说</a>
                        </li>
                        <li role="presentation">
                            <a>玄幻小说</a>
                        </li>
                        <li role="presentation">
                            <a>科幻小说</a>
                        </li>
                        <li role="presentation">
                            <a>安妮宝贝</a>
                        </li>
                        <li role="presentation">
                            <a>网络小说</a>
                        </li>
                        <li role="presentation">
                            <a>张悦然</a>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
</div>

<div id="basic-inf" class="container">
    <div id="middle-image-wrap" class="col-md-3">
        <img id="middle-image" src="${book.midiumImage}" onerror="this.src='${path}/images/default-book.png'" />
    </div>
    <div id="basic-inf-wrap" class="col-md-9">
        <p id="book-title">${book.title}&nbsp;${book.subtitle}</p>
        <p id="book-summary">${book.summary}</p>
        <hr/>
        <p id="book-author-publisher">
            <%--作者--%>
            <c:if test="${book.author != null && !(book.author eq '')}">
            <b>作者：</b>&nbsp;
            <span class="book-author">${book.author}</span>
            &nbsp;&nbsp;著&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </c:if>
            <%--翻译--%>
            <c:if test="${book.translator != null && !(book.translator eq '')}">
            <b>翻译：</b>&nbsp;
            <span class="book-translator">${book.translator}</span>
            &nbsp;&nbsp;译&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </c:if>
            <%--出版社--%>
            <c:if test="${book.publisher != null && !(book.publisher eq '')}">
            <b>出版社：</b>&nbsp;
            <span id="book-publisher">${book.publisher}</span>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </c:if>
            <%--出版时间--%>
            <c:if test="${book.pubdate != null && !(book.pubdate eq '')}">
            <b>出版时间：</b>&nbsp;
            <span>${book.pubdate}</span>
            </c:if>
        </p>
        <p id="book-tags">
            <%--书籍标签--%>
            <c:if test="${book.tags != null && !(book.tags eq '')}">
                <b>标签：</b>
                <c:forTokens items="${book.tags}" delims=" " var="tag">
                    &nbsp;&nbsp;<span class='book-tag'>${tag}</span>&nbsp;&nbsp;
                </c:forTokens>
            </c:if>
        </p>
        <p id="book-isbn-page">
            <%--ISBN10--%>
            <c:if test="${book.isbn10 != null && !(book.isbn10 eq '')}">
                <b>ISBN10：</b>${book.isbn10}&nbsp;&nbsp;&nbsp;&nbsp;
            </c:if>
            <%--ISBN13--%>
            <c:if test="${book.isbn13 != null && !(book.isbn13 eq '')}">
                <b>ISBN13：</b>${book.isbn13}&nbsp;&nbsp;&nbsp;&nbsp;
            </c:if>
            <%--页数--%>
            <c:if test="${book.pages != null && !(book.pages eq '')}">
                <b>页数：</b>${book.pages}&nbsp;&nbsp;&nbsp;&nbsp;
            </c:if>
        </p>
    </div>
</div>

<div id="main" class="container">
    <div id="recommend-wrap" class="col-md-3">
        <div id="recommend-wrap-panel" class="panel panel-primary">
            <div class="panel-heading">
                <span>猜你喜欢</span>
            </div>
            <div id="recommend-wrap-body" class="panel-body">

            </div>
        </div>
    </div>
    <div id="borrow-wrap" class="col-md-9">
        <div id="borrow-panel" class="panel panel-primary">
            <div class="panel-heading">
                <span>校园上线图书</span>
            </div>
            <div id="borrow-panel-body" class="panel-body">
                <div class="table-responsive">
                    <table id="goods-college" class="table table-hover table-condensed" >
                        <tr class="success">
                            <th>学校</th>
                            <th>校区</th>
                            <th>寝室</th>
                            <th>QQ</th>
                            <th>电话</th>
                            <th>价格</th>
                            <th>发布时间</th>
                            <th>借书</th>
                        </tr>
                        <%--<tr>--%>
                        <%--<td>四川轻化工大学</td>--%>
                        <%--<td>临港校区</td>--%>
                        <%--<td>B8-C229</td>--%>
                        <%--<td>--%>
                        <%--<a class="chat" data-toggle="tooltip" data-placement="left" title="1393886097 点击联系他"--%>
                        <%--href="tencent://message/?uin=1767234937&Site=校园图书&Menu=yes">--%>
                        <%--<div class="qqChat"--%>
                        <%--style="background-image: url('${path}/images/qqChat.png');"></div>--%>
                        <%--1393886097--%>
                        <%--</a>--%>
                        <%--</td>--%>
                        <%--<td>--%>
                        <%--<div class="chat">--%>
                        <%--<div class="phoneChat" style="background-image: url('${path}/images/phoneChat.png');"></div>--%>
                        <%--15583789495--%>
                        <%--</div>--%>
                        <%--</td>--%>
                        <%--<td>3.5</td>--%>
                        <%--<td>2019/03/12</td>--%>
                        <%--<td>借书</td>--%>
                        <%--</tr>--%>

                    </table>
                </div>
            </div>
            <div id="borrow-panel-footer" class="panel-footer">
                <nav id="paging" aria-label="Page navigation">
                    <ul class="pagination">
                        <li>
                            <a><img class="pageIcon" src="${path}/images/firstPage.png" /></a>
                        </li>
                        <li>
                            <a><span aria-hidden="true">&laquo;</span></a>
                        </li>
                        <li><a>1</a></li>
                        <li><a>2</a></li>
                        <li><a>3</a></li>
                        <li><a>4</a></li>
                        <li><a>5</a></li>
                        <li>
                            <a><span aria-hidden="true">&raquo;</span></a>
                        </li>
                        <li>
                            <a><img class="pageIcon" src="${path}/images/lastPage.png" /></a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
        <div id="book-catalog">
            <div id="book-catalog-panel" class="panel panel-primary">
                <div class="panel-heading">
                    <span>目录：</span>
                </div>
                <div id="catalog" class="panel-body">
                    <c:if test="${book.catalog != null && !(book.catalog eq '')}">
                        <c:forTokens items="${book.catalog}" delims="！@#" var="log">
                            <p><c:out value="${log}"/> </p>
                        </c:forTokens>
                    </c:if>
                    <c:if test="${book.catalog == null || book.catalog eq ''}">
                        <p>没有目录......</p>
                    </c:if>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="tail">

</div>

<div id="float-box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>


<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script type="text/javascript" src="${path}/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="${path}/js/sweetalert2.min.js"></script>
<script type="text/javascript" src="${path}/js2/page-index.js"></script>
<script type="text/javascript" src="${path}/js2/SmallBookList.js"></script>
<script type="text/javascript" src="${path}/js2/GoodsList.js"></script>
<script type="text/javascript" src="${path}/js2/page-book.js"></script>

<script type="text/javascript">

    $(function(){
        SmallBookList.init("${path}", $("#recommend-wrap-body"));
        PageBook.init("${path}");
        GoodsList.init("${path}", ${book.id});
    });

</script>

<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="${path}/js/bootstrap.min.js"></script>
</body>
</html>